import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'
import { AppOutline, AppstoreOutline, KoubeiOutline, ShopbagOutline, UserOutline } from 'antd-mobile-icons'
import { withRouter } from 'react-router-dom'

class MyTabbar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tabs: [
                {
                    key: '/index/home',
                    title: '首页',
                    icon: <AppOutline />
                },
                {
                    key: '/index/cate',
                    title: '分类',
                    icon: <AppstoreOutline />
                },
                {
                    key: '/index/allgood',
                    title: '所有商品',
                    icon: <KoubeiOutline />
                },
                {
                    key: '/index/shopcart',
                    title: '购物车',
                    icon: <ShopbagOutline />
                },
                {
                    key: '/index/mine',
                    title: '个人中心',
                    icon: <UserOutline />
                },
            ]
        }
    }
    handleChange = (key) => {
        //跳路由
        if (key === '/index/allgood') {
            var id = 281462
            this.props.history.push({ pathname: '/index/allgood', state: { id } });
        } else {
            this.props.history.push(key);
        }
    }
    render() {
        return (
            <TabBar className='mytabbar' onChange={this.handleChange}>
                {
                    this.state.tabs.map(item => {
                        return (
                            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                        )
                    })
                }
            </TabBar>
        );
    }
}

//当一个组件不是通过Route路由规则渲染的, 该组件的props默认是空的.
//可以用withRouter高阶组件处理一下当前组件,会自动嵌入三个路由对象.
//也可以在父组件中给当前组件传入三个路由对象

export default withRouter(MyTabbar);